<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单打印</title>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap3/css/bootstrap-theme.css"></link>
    <script type="text/javascript" src="/static/bootstrap3/js/bootstrap.min.js"></script>
    <style type="text/css">
        @page {
            size: auto; /* auto is the initial value */
            margin: 0mm; /* this affects the margin in the printer settings */
        }
    </style>
    <style type="text/css">
        body {
            background: white;
            margin: 0px;
            padding: 0px;
            font-size: 13px;
            text-align: center;
        }
        .pb {
            font-size: 13px;
            border-collapse: collapse;
        }
        .pb th {
            font-weight: bold;
            text-align: center;
            border: 1px solid #333333;
            padding: 2px;
        }

        .pb td {
            border: 1px solid #333333;
            padding: 2px;
        }

        table{
            margin: auto;
        }

        args{
            float: left
        }


        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        table{
            clear: both;
            width: 80%;
            margin: 0 auto;
            text-align: center;
            border: 1px solid black;
        }
        thead td{
            font-size: 13px;
            font-weight: 600;
        }
        td{
            border: 1px solid #555555;
            line-height: 20px;
        }
        .box{
            width: 80%;
            margin: 30px auto 40px;
            overflow: hidden;
        }
        .box>div{
            float: left;
        }
        .box .left p{
            float: left;
            height: 50px;
        }
        .box .left div{
            clear: both;
        }
        .left{
            width: 30%;
        }
        .center{
            width: 40%;
        }
        .right{
            width: 30%;
        }
        .box .left div p:nth-child(1){
            padding-top: 35px;
        }
        .box .left div p:nth-child(2){
            padding-top: 35px;
            width: 40%;
            border-bottom: 1px solid black;
        }
        .center {
            padding-top: 35px;
        }
        .center_left{
            padding-left: 0%;
        }
        .center>div{
            float: left;
            width: 50%;
        }
        .center_right{
            padding-left: 0%;
        }
        .center_right p{
            margin-left: 20px;
            float: left;
            text-align: center;
            margin-top: 15px;
            font-size: 20px;
        }
        .center_right p:nth-child(2){
            width: 35%;
        }
        .center .center_bottom{
            clear: both;
            margin-top: 25px;
            width: 90%;
            text-align: center;
            font-size: 20px;
            border-bottom: 1px solid black;
        }
        .right div p:first-child{
            padding-left: 40%;
        }
        .bottom_box{
            width: 80%;
            margin: 20px auto 0;
        }
        .bottom_box div{
            float: left;
            padding-left: 5%;
            min-width: 20%;
        }
        .bottom_box div p{
            float: left;
            margin-left: 10px;
        }
        /* 调整头部 */
        .box .right div{
            display: flex;
            justify-content: flex-end;
            padding-bottom: 1em;
        }
        .box .left div{
            display: flex;
            justify-content: flex-start;
            padding-bottom: 1em;
        }
    </style>
</head>
<body>
<div class="container">
    <!--打印-->
    <button class="btn-info" id="backBtn">返回</button>
    <button class="btn-info" id="printBtn">打印</button>

    <script type="text/javascript">
        $(function () {
            $(document).bind('contextmenu', function (e) {
                e.preventDefault();
            });
        });

        var tableString = localStorage.getItem("tableString");
        document.write("<div style='text-align:center;'>"+tableString+"</div>");


        var showBtn = true;
        $("#printBtn").click(function(){
            $("#printBtn").hide();
            $("#backBtn").hide();
            showBtn = false;
            window.print();
            CloseAfterPrint();
        })
        $("#backBtn").click(function(){
            window.history.back();
        })

        function CloseAfterPrint(){
            console.log("CloseAfterPrint")
            if(document.execCommand("print")){
                console.log("exec print")
                window.close();
                showBtn = true;
                $("#printBtn").show();
                $("#backBtn").show();
            }
        }


        $(document).ready(function(){
            showAndHideBtn();
        })

        function showAndHideBtn(){
            if(showBtn){
                $("#printBtn").show();
                $("#backBtn").show();
            }else{
                $("#printBtn").hide();
                $("#backBtn").hide();
            }
        }

        function DoSomeThing(){
            ClostAfterPrint();
        }

    </script>
</div>
</body>
</html>